<!--
 * @Author: 'Chenfarry' '2925102113@qq.com'
 * @Date: 2024-08-21 14:38:28
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-10-06 17:35:04
 * @FilePath: \orderApp\pages\rank\components\dishesRank.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="content">
    <view class="title">{{ kitchenName }}食堂</view>
    <view class="sortBox">
      <view
        v-for="(item, index) in sortList"
        :key="index"
        class="sortItem"
        :class="sortIdx == index ? 'act-sort' : ''"
        @click="changeSort(index)"
      >
        {{ item }}
      </view>
    </view>
    <view class="scrollBox">
        <view v-if="rankList.length">
          <view class="rankListBox">
            <view v-for="(item, index) in rankList" :key="index" class="rankItem">
              <view>
                <uv-image
                  v-if="index <= 2"
                  :src="`${baseIMGURL}rank${index}.svg`"
                  width="62rpx"
                  height="62rpx"
                ></uv-image>
                <view class="rank-Bg cu-flex" v-if="index > 2 && index < 10">
                  {{ index + 1 }}
                </view>
                <view class="rank-Idx" v-if="index >= 10">
                  {{ index + 1 }}
                </view>
              </view>

              <view class="rankItem-ImgBox">
                <uv-image
                  :src="item.dishUrl"
                  width="92rpx"
                  height="92rpx"
                  radius="10"
                  :observeLazyLoad="true"
                >
                  <template v-slot:loading>
                    <uv-loading-icon color="#d9dede"></uv-loading-icon>
                  </template>
                </uv-image>
              </view>
              <view>
                <p class="rankItem-Name">{{ item.dishName }}</p>
                <view class="flex">
                  <p class="rankItem-sortName">{{ sortList[sortIdx] }}:</p>
                  <p v-if="sortIdx == 0" class="rankItem-sortNum">{{ item.allReview }}</p>
                  <p v-if="sortIdx == 1" class="rankItem-sortNum">{{ item.allFollow }}</p>
                  <p v-if="sortIdx == 2" class="rankItem-sortNum">{{ item.allChoose }}</p>
                </view>
              </view>
            </view>
          </view>
          <uv-load-more
            line
            :status="loadMore.status"
            :loading-text="loadMore.loadingText"
            :loadmore-text="loadMore.loadmoreText"
            :nomore-text="loadMore.nomoreText"
            @loadmore="loadHandler"
          />
        </view>
        <cu-empty v-else></cu-empty>
    </view>
  </view>
</template>

<script lang="ts" setup>

// 图片基地址
const baseIMGURL = import.meta.env.VITE_IMG_BASEURL;
import { reqDishRanking } from "@/service/business/goods";

import { useUserStore } from "@/store";
const userStore = useUserStore();

const sortList = ["好评度", "关注度", "被选度"];
const sortIdx = ref(0);
const kitchenName = ref("");

// 加载状态数据
const loadMore = ref({
  status: "loading",
  loadingText: "努力加载中",
  loadmoreText: "上拉或点击加载更多",
  nomoreText: "到底啦",
});

// 分页信息
const pageInfo = ref({
  size: 10,
  current: 1,
  total: null,
});

// 手动加载更多
const loadHandler = () => {
  console.log(78778);
  loadMoreFn();
};

// 触底加载更多
onReachBottom(() => {
  console.log(888888);
  loadMoreFn();
});

const loadMoreFn = () => {
  if (pageInfo.value.current >= Math.ceil(pageInfo.value.total / pageInfo.value.size)) {
    loadMore.value.status = "nomore";
    return false;
  }
  pageInfo.value.current++;
  getDishRanking();
};

const rankList = ref([]);
const getDishRanking = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  loadMore.value.status = "loading";
  const params = {
    kitchenId: userStore.userInfo.user.kitchenId,
    size: pageInfo.value.size,
    current: pageInfo.value.current,
    sign: sortIdx.value,
  };
  reqDishRanking(params).then((res) => {
    if (res.retCode == 2000) {
      uni.hideLoading();
      rankList.value.push(...res.data.dishes);
      kitchenName.value = res.data.kitchenName;
      pageInfo.value.total = res.total;
      if (pageInfo.value.current < Math.ceil(res.total / pageInfo.value.size)) {
        loadMore.value.status = "loadmore";
      } else {
        loadMore.value.status = "nomore";
      }
    }
  });
};

const changeSort = (index) => {
  sortIdx.value = index;
  rankList.value.splice(0, rankList.value.length);
  pageInfo.value.current = 1;
  getDishRanking();
};

onMounted(() => {
  getDishRanking();
});
</script>

<style lang="scss" scoped>
.rank-Bg {
  width: 62rpx;
  height: 62rpx;
  background-image: url("/static/images/rank4.png");
  background-size: 100% 100%;
  font-weight: bold;
  font-size: 29rpx;
  line-height: 62rpx;
  color: #ffffff;
  text-shadow: -1px -1px 0 #00754a, 1px -1px 0 #00754a, -1px 1px 0 #00754a,
    1px 1px 0 #00754a;
  text-align: center;
}
.rank-Idx {
  width: 62rpx;
  height: 62rpx;
  font-weight: bold;
  font-size: 29rpx;
  line-height: 62rpx;
  color: #ffffff;
  text-shadow: -1px -1px 0 #00754a, 1px -1px 0 #00754a, -1px 1px 0 #00754a,
    1px 1px 0 #00754a;
  text-align: center;
}

.rankItem {
  padding: 24rpx 0;
  border-bottom: 1px solid #ebedf0;
  display: flex;
  align-items: center;
  &-ImgBox {
    margin: 0 16rpx;
  }

  &-Name {
    font-weight: 600;
    font-size: 31rpx;
    color: #111111;
    line-height: 46rpx;
  }
  &-sortName {
    font-weight: 400;
    font-size: 27rpx;
    color: #969799;
    line-height: 42rpx;
    margin-right: 10rpx;
  }

  &-sortNum {
    font-weight: 600;
    font-size: 31rpx;
    color: #00754a;
    line-height: 46rpx;
  }
}
</style>
